<template>
  <div :class="ivrList.length > 0 ? 'ivr-li-wrap' : ''">
    <ul class="ivr-list-ul" v-for="(item, index) in ivrList" :key="index">
      <li class="ivr-list-item">
        <span>{{ item.name }}</span>
      </li>
      <li v-for="(nodeItem, nodeIndex) in item.nodes" :key="nodeIndex" class="clearfix">
        <span class="timestamp">{{ nodeItem.timestamp || nodeItem.intoNodeTime }}</span>
        <div class="ivr-list-right">
          <span class="duration" v-if="nodeItem.duration >= 0">{{ nodeItem.duration }}s</span>
          <span v-if="nodeItem.action"> {{ getActionName(nodeItem) }}</span>
          <span v-else> {{ getNodeName(nodeItem.ivrNodeType) }} - {{ nodeItem.ivrNodeName }}</span>
          <span class="time-line-audio" v-if="nodeItem.recordFileUrl">
            <audio-operate
              :row="{
                url: nodeItem.recordFileUrl,
                isplay: nodeItem.isplay,
                _id: nodeIndex + '_timeline'
              }"
              @onAudioClick="restTablePlay"
            ></audio-operate>
            <a :href="nodeItem.recordFileUrl" target="_blank" download>
              <i class="MC_iconfont MC_icon-shangchuan-xiazai"></i>
            </a>
          </span>
        </div>
      </li>
    </ul>
    <div class="empty" v-show="ivrList.length <= 0">暂无通话轨迹~</div>
  </div>
</template>

<script lang="ts">
import audioOperate from '@/common/components/audio/audio-operate.vue'
import { defineComponent, reactive, toRefs, watch } from 'vue'

import { getIvrList } from '@app/base/apis/call'

export default defineComponent({
  name: 'ivrList',
  components: { audioOperate },
  props: {
    callId: {
      type: String,
      default: ''
    }
  },
  // ----------------生命周期-----------------------
  setup(props: any) {
    // ----------------传入属性-----------------------
    // ----------------内部属性-----------------------
    const state = reactive({
      ivrList: [],
      getNodeName(type: any) {
        let typeName = ''
        switch (type) {
          case 'ivr-node-start':
            typeName = '开始节点'
            break
          case 'ivr-node-play':
            typeName = '播放语音节点'
            break
          case 'ivr-node-date':
            typeName = '时间条件节点'
            break
          case 'ivr-node-menu':
            typeName = '按键菜单节点'
            break
          case 'ivr-node-transfer':
            typeName = '转人工节点'
            break
          case 'ivr-node-satisfaction':
            typeName = '转满意度'
            break
          case 'ivr-node-voicemail':
            typeName = '留言节点'
            break
          case 'ivr-node-callurl':
            typeName = '数据交互节点'
            break
          case 'dialoutCallMemory':
            typeName = '外呼记忆'
            break
          case 'ivr-node-collect':
            typeName = '采集收号节点'
            break
          case 'ivr-node-dynamic-route':
            typeName = '分支路由节点'
            break
          default:
            break
        }
        return typeName
      },
      getActionName(item: any) {
        let typeName = ''
        switch (item.action) {
          case 'incoming':
            typeName = '开始呼叫'
            break
          case 'dialout':
            typeName = '开始呼叫'
            break
          case 'joinQueue':
            typeName = '分配座席'
            break
          case 'ring':
            typeName = '振铃'
            break
          case 'answer':
            typeName = '接听'
            break
          case 'transfer':
            typeName = `转移  ${item.ivrNodeName || ''}`
            break
          case 'consult':
            typeName = `咨询  ${item.ivrNodeName || ''}`
            break
          case 'consultFailed':
            typeName = '咨询失败'
            break
          case 'consultCancel':
            typeName = '取消咨询'
            break
          case 'consultStop':
            typeName = '结束咨询'
            break
          case 'consultResume':
            typeName = '咨询接回'
            break
          case 'consultTransfer':
            typeName = '咨询转移'
            break
          case 'consultThreeWayCall':
            typeName = `三方通话  ${item.ivrNodeName || ''}`
            break
          case 'satisfaction':
            typeName = '转满意度'
            break
          case 'autoDialout':
            typeName = '系统外呼'
            break
          case 'hangup':
            typeName = '挂机'
            break
          case 'joinQueueDialoutMemory':
            typeName = '分配座席 - 外呼记忆'
            break
          case 'joinQueueincommingMemory':
            typeName = '分配座席 - 来电记忆'
            break
          case 'joinQueueBusy':
            typeName = '分配座席 - 座席忙'
            break
          case 'assign':
            typeName = `分配至 - ${item.ivrNodeName || ''}`
            break
          default:
            break
        }
        return typeName
      },
      async getIRlist() {
        const res = await getIvrList({ superUniqueId: props.callId })
        if (res.success) {
          // state.ivrList = handleIvrList(res.data.flows || [])
          state.ivrList = res.data.flows || []
        }
      }
    })
    // const handleIvrList = (arr: any) => {
    //   arr.map((item: any, index: Number) => {
    //     // 后端没有返回标识性的id,所以需要前端自己维护一下，用于多个录音播放时重置其他
    //     item.audioId = `${index}_timeline`
    //   })
    //   return arr
    // }
    // // 点击列表的听取录音，重置其他数据
    // const restTablePlay = (data: any) => {
    //   const arr: any = []
    //   state.ivrList.forEach((item: any) => {
    //     if (item.audioId === data._id) {
    //       item.isplay = data.isplay
    //     } else {
    //       item.isplay = false
    //     }
    //     arr.push(item)
    //   })
    //   state.ivrList = arr
    // }
    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
    watch(
      props,
      (props) => {
        if (props.callId) {
          state.getIRlist()
        }
      },
      {
        immediate: true
      }
    )
    // ----------------调用方法-----------------------
    return {
      ...toRefs(state)
      // restTablePlay
    }
  }
})
</script>

<style lang="stylus" scoped>
.empty
  text-align: center
  color rgba(0,0,0,0.6)
.clearfix
  display: flex
  align-items: center
.clearfix:after
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
.ivr-li-wrap
  position relative
  padding 6px 0
  &:after
   content ''
   position absolute
   top 0
   bottom 0
   width 1px
   background rgba(30, 99, 245, 0.3)
   left 136px
.ivr-list-ul
   padding-bottom 14px
   padding-left 0
  li
    margin-bottom 16px
  .duration
    padding 3px 4px
    color var(--el-color-primary)
    background rgba(30, 99, 245, 0.1)
    border-radius 2px
    margin-right 6px
  .timestamp
    position relative
    width 134px
    color rgba(0, 0, 0, 0.6)
    font-size 12px
    font-weight: 400
    &:after
      content ''
      display inline-block
      width 5px
      height 5px
      border-radius 50%
      background var(--el-color-primary-dark)
      position absolute
      right -5px
      top 0
      bottom 0
      margin: auto 0
  .ivr-list-item
    padding-left 153px
    color rgba(0, 0, 0, 0.88)
    font-weight 600
  .ivr-list-right
    padding-left 20px
    color rgba(0, 0, 0, 0.88)
    font-size 14px
    font-weight: 400
.time-line-audio
  padding-left 16px
  vertical-align text-bottom
  a
    text-decoration: none;
  .MC_icon-shangchuan-xiazai
    font-size 20px
    color var(--mc-main-color)
    margin-left 18px
</style>
